<template>
	<view class="cu-modal bottom-modal" v-show="isShow" :class="{'show':isShow}" @click="hide">
		<view class="cu-dialog" @click.stop="">
			<view class="goods-data">
				<view class="thumb">
					<image src="/static/img/yf_02.jpg" mode=""></image>
				</view>
				<view class="item">
					<view class="title">
						<text></text>
					</view>
					<view class="price">
						<text class="min">￥</text>
						<text class="max">299</text>
						<text class="min">.00</text>
					</view>
					<view class="inventory">
						<text>库存：3000</text>
					</view>
				</view>
			</view>
			<view class="attr-size">
				<view class="attr-list" v-for="(item,index) in AttrSizeList" :key="index">
					<view class="title">
						<text>{{item.attr}}</text>
					</view>
					<view class="size-list">
						<div class="list" v-for="(value,idx) in item.SizeList" :class="{'action':AttrSizeList[index].index === idx}"
							@click.stop="onAttrSize(item,value,index,idx)" :key="idx">
							<text>{{value.size}}</text>
						</div>
					</view>
				</view>
				<view class="attr-number" @click.stop="onStop">
					<view class="tit">数量</view>
					<!-- <view class="number">
						<text class="iconfont icon-jian" @click="goods_num > 1 ?--goods_num:''"></text>
						<input :value="goods_num" type="tel" maxlength="8">
						<text class="iconfont icon-jia" @click="goods_num < 8 ?++goods_num:''"></text>
					</view> -->
					<view class="number">
						<uv-number-box button-size="30" v-model="goods_num" @change="valChange"></uv-number-box>
					</view>
				</view>
			</view>
			<view class="attr-btn">
				<view class="add-cart" v-if="BuyType === 1" @click="onConfirm(BuyType),hide">加入购物车</view>
				<view class="add-buy" v-if="BuyType === 1" @click="onConfirm(BuyType),hide">立即购买</view>
				<view class="confirm" v-if="BuyType === 2 || BuyType === 3" @click="onConfirm(BuyType)">确定</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits,
		reactive
	} from 'vue';
	const goods_num = ref(1)
	const AttrIndex = ref(0)
	const SizeIndex = ref(0)
	const AttrSizeList = reactive([{
		index: 0,
		attr: '颜色',
		SizeList: [{
			index: 0,
			size: '白色'
		}, {
			index: 1,
			size: '黑色'
		}, {
			index: 2,
			size: '粉丝'
		}, {
			index: 3,
			size: '灰色'
		}, ],
	}, {
		index: 0,
		attr: '尺码',
		SizeList: [{
			index: 0,
			size: 'M尺码'
		}, {
			index: 1,
			size: 'L尺码'
		}, {
			index: 2,
			size: 'XL尺码'
		}, {
			index: 3,
			size: 'XXL尺码'
		}, ],
	}])
	const props = defineProps({
		'isShow': {
			default: false,
			type: Boolean
		},
		'BuyType': {
			default: 0,
			type: Number
		}
	})
	const emit = defineEmits(['noshow'])
	import {
		onShow
	} from '@dcloudio/uni-app'
	const hide = () => {
		emit('noshow')
	}
	const onStop = () => {

	}
	const onAttrSize = (item, value, index, idx) => {
		AttrSizeList[index].index = idx;
		AttrIndex.value = item.index;
		SizeIndex.value = value.index;
	}
	const onConfirm = (type) => {
		uni.navigateTo({
			url: '/pages/ConfirmOrder/ConfirmOrder'
		})
	}
</script>

<style scoped lang="scss">
	@import 'GoodsAttr.scss';
</style>